@border: 1*@hd solid #DADADA;
@import './datepicker.less';
.workplan-info(@width) {
  .workplan-info {
    display: inline-block;
    min-height: 50*@hd;
    width: @width;
    // border-left: @border;
    .info-dispaly {
      padding-top: 5*@hd;
      padding-bottom: 5*@hd;
      padding-left: 11*@hd;
      padding-right: 11*@hd;
      font-family: PingFangSC-Regular;
      font-size: 14*@hd;
      color: #333333;
      letter-spacing: -0.39*@hd;
      .info-header {
        width: 100%;
        height: 20*@hd;
        line-height: 20*@hd;
        label {
          display: inline-block;
          font-size: 14*@hd;
          color: #55B1F9;
          vertical-align: top;
        }
        .title {
          width: calc(~'100% - '55*@hd);
          display: inline-block;
          color: #55B1F9;
          margin-left: 18*@hd;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .info-hrm {
        height: 100%;
        width: 100%;
        line-height: 20*@hd;
        word-break: break-all;
      }
    }
  }
}

.oneweek-workplan-container {
  height: 100%;
  width: 100%;
  position: relative;
  // border: 1*@hd solid red;
  line-height: normal;
  div {
    -webkit-overflow-scrolling: touch;
  }
  .active {
    box-shadow: 0*@hd 0*@hd 5*@hd @brand-primary;
  }
  
  &-head {
    height: 44*@hd;
    width: 100%;
    overflow: hidden;
    background: #E8E8E8;
    .date-picker {
      float: left;
      padding-top: 5*@hd;
      text-align: center;
    }
    .week-button {
      float: left;
      width: 15%;
      height: 28*@hd;
      line-height: 28*@hd;
      margin-top: 5*@hd;
      margin-left: 1.4%;
      text-align: center;
      background: #FFFFFF;
      border: 1*@hd solid #BEBEBE;
      border-radius: 4*@hd;
    }
    .do-refresh {
      float: left;
      margin-left: 4.3%;
      width: 20*@hd;
      height: 20*@hd;
      margin-top: 10*@hd;
      color: #B2B2B2;
    }
    .display-type {
      float: left;
      width: 20*@hd;
      height: 25*@hd;
      margin-top: 5*@hd;
      margin-left: 5%;
      padding-top: 3*@hd;
      .am-icon {
        display: table;
      }
    }
  }
  .wm-select-page {
    border-bottom: @border;
    .wm-select-page-input {
      .am-list-form {
        border: 0*@hd;
        .am-list-label {
          display: none;
        }
      }
    }
  }
  &-content-y {
    position: fixed;
    top: 89*@hd;
    bottom: 0*@hd;
    left: 0*@hd;
    right: 0*@hd;
    background: #E8E8E8;
    .scroll-header {
      width: 100%;
      height: 43*@hd;
      line-height: 43*@hd;
      border-bottom: @border;
      
      .time-label {
        display: inline-block;
        width: 145*@hd;
        height: 100%;
        text-align: center;
        border-right: @border;
      }
      .content-label {
        display: inline-block;
        width: calc(~'100% - '146*@hd);
        height: 100%;
        text-align: center;
      }
    }
    .scroll-content {
      height: calc(~'100% - '45*@hd);
      overflow-y: auto;
      .table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        td {
          table-layout: fixed;
        }
        .table-row:nth-child(odd) {
          background: #FFFFFF;
        }
        
        .table-row {
          overflow: hidden;
          border-bottom: @border;
          position: relative;
          .tr-left {
            width: 94*@hd;
            height: 100%;
            overflow: hidden;
            div {
              text-align: center;
              font-family: PingFangSC-Regular; 
              font-size: 14*@hd;
              width: 94*@hd;
              span {
                display: block;
                color: #333333;
                letter-spacing: -0.39*@hd;
              }
              .week {
                color: #999999;
                letter-spacing: -0.1*@hd;
              }
            }
          }
        
          .tr-right {
            height: 100%;
            // width: calc(~"100% - "94*@hd);
            .workplan-item:not(:first-child){
              border-top: @border;
            }
            .workplan-item {
              border-left: @border;
              overflow: hidden;
              display: flex;
              .time-label {
                display: inline-block;
                margin: auto 0;
                text-align: center;
                width: 50*@hd;
                span {
                  display: inline-block;
                  // width: 28*@hd;
                  height: 20*@hd;
                  // margin-left: 11*@hd;
                  // margin-right: 11*@hd;
                }
              }
              .workplan-info( calc(~'100% - '51*@hd) );
              .workplan-info {
                border-left: @border;
              }
            }
          }
        }
      }
    }
  }
  &-content-x {
    position: fixed;
    top: 89*@hd;
    bottom: 0*@hd;
    left: 0*@hd;
    right: 0*@hd;
    background: #E8E8E8;
    .scroll-header {
      width: 100%;
      height: 44*@hd;
      border-bottom: @border;
      .left{
        float: left;
        width: 94*@hd;
        height: 100%;
        border-right: @border;
      }
      .right {
        float: left;
        width: calc(~"100% - "95*@hd);
        height: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        .workplan-item:not(:first-child) {
          border-left: @border;
        }
        .workplan-item {
          display: inline-block;
          width: 284*@hd;
          height: 100%;
          line-height: 44*@hd;
          text-align: center;

        }
      }
    }
   
    .scroll-content {
      width: 100%;
      height: calc(~'100% - '45*@hd);
      overflow: hidden;
      .left-scroll {
        float: left;
        width: 94*@hd;
        height: 100%;
        border-right: @border;
        overflow-y: scroll;
        overflow-x: hidden;
        .tr-left:nth-child(odd) {
          background: #FFFFFF;
        }
        .tr-left:first-child {
          // padding-bottom: 1*@hd;
        }
        .tr-left {
          float: left;
          width: 94*@hd;
          min-height: 55*@hd;
          display: flex;
          align-items: center;
          justify-content: center;
          // border-bottom: @border;
          div {
            text-align: center;
            font-family: PingFangSC-Regular; 
            font-size: 14*@hd;
            span {
              display: block;
              color: #333333;
              letter-spacing: -0.39*@hd;
            }
            .week {
              color: #999999;
              letter-spacing: -0.1*@hd;
            }
          }
        }
      }
      .right-scroll {
        float: left;
        width: calc(~"100% - "95*@hd);
        height: 100%;
        overflow: auto;
        .scroll-content {
          height: 100%;
          width: 100%;
          border-collapse: collapse;
          white-space: nowrap;
          .tr-right:nth-child(odd) {
            background: #FFFFFF;
          }
          
          .tr-right {
            // border-bottom: @border;
            .workplan-item:not(:first-child) {
              border-left: @border;
            }
            .workplan-item {
              display: inline-block;
              width: 284*@hd;
              min-height: 55*@hd;
              height: 100%;
              padding: 0*@hd;
              white-space: normal;
              overflow: hidden;
              .time-label {
                display: inline-block;
                margin: auto 0;
                text-align: center;
                span {
                  display: inline-block;
                  width: 28*@hd;
                  height: 20*@hd;
                  margin-left: 11*@hd;
                  margin-right: 11*@hd;
                }
              }
              .workplan-info(100%);
            
            }
          }
        }

      }
    }
  }
}
.loaidng-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}